<template>
  <div class="box-wrap">
    <header v-if="title">
      <p class="title">{{ title }}</p>
      <slot name="title-after"></slot>
    </header>
    <slot></slot>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
    },
  },
};
</script>
<style scoped lang='scss'>
.box-wrap {
  background: RGBA(15, 41, 45, 0.7);
  padding-top: vh(21px);
  position: relative;
  z-index: 4;
  header {
    margin-left: vw(16px);
    background-image: url("~@/assets/concreteScreen/tit_bg@2x.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: vh(40px);
    padding-left: vw(50px);
    display: flex;
    align-items: center;
    .title {
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: vh(20px);
      color: #dafdff;
      margin: 0;
    }
  }
}
</style>
